<template>
    <div class="container">
      <div class="left">
        <ul>
          <div class="top-div">
            <div style="padding: 10px 0;font-size:14px;border-bottom:1px solid white;background-color:#30A2A0;">
              <i class="layui-icon layui-icon-windows" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
              PinHome
            </div>
          </div>
          <li @click="changePage('Home')">
            <input type="radio" name="selectname" checked>
            <i class="layui-icon layui-icon-template-one" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Home
          </li>
          <li @click="changePage('Rate')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-heart" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Rate Plans
          </li>
          <li @click="changePage('Bookings')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-layer" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Bookings
          </li>
          <li @click="changePage('Apartments')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-time" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Apartments
          </li>
          <li @click="changePage('Pricing')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-engine" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Pricing
          </li>
        </ul>
        <lay-line></lay-line>
        <ul>
          <li @click="changePage('Support')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-templeate-one" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            Support
          </li>
          <li @click="changePage('Logout')">
            <input type="radio" name="selectname">
            <i class="layui-icon layui-icon-logout" style="color:#FBE176;font-size: 18px;font-weight:400px"></i>
            LogOut
          </li>
          <li></li>
        </ul>
      </div>
      <div class="right">
        <slot name="content"></slot>
      </div>
    </div>
  </template>
<script setup lang="ts">
import { onMounted, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()!;

const loadTree = (parent: any, excludeClassNames: Array<string>, callback: (parent: HTMLElement) => void) => {
  if (parent.getAttributeNames().includes([...excludeClassNames].join())) {
    return;
  }
  for (let i = 0; i < parent.children.length; i++) {
    let child = parent.children[i];
    loadTree(child, excludeClassNames, callback);
  }
  if (callback) {
    callback(parent);
  }
}

onMounted(() => {
  loadTree(proxy!.$el, ['none-drag-region'], (ele: HTMLElement) => {
    ele.setAttribute("data-tauri-drag-region", "")
  })
})
const current = defineModel('current');
const changePage:(page:string)=>void=(page)=>{
  current.value=page;
  console.log('child model',current.value) 
}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  --li-height:32px;
  --li-radius-size: calc(var(--li-height) / 2);
  --right-radius-size:20px;
  height: 100vh;
  display: flex;
  border-radius: 20px;
  background-color: #30A2A0;

  .left {
    height: 100%;
    display: flex;
    width: fit-content;
    flex-direction: column;
    justify-content: flex-start;
    color: white;
    padding: 20px 0px 20px 20px;

    ul {
      list-style-type: none;
      font-size: 14px;
      background: linear-gradient(to right, #30A2A0, white);

      li {
        position: relative;
        display: flex;
        align-items: center;
        height: var(--li-height);
        cursor: pointer;
        background-color: #30A2A0;
        padding-left: 10px;
        padding-right: 10px;
        input {
          position: absolute;
          width: 100%;
          height: 100%;
          appearance: none;
          left: 0;
          bottom: 0;
          z-index: 1;
        }

        i {
          margin-right: 5px;
        }
      }

      li:has(+li>input:checked) {
        border-bottom-right-radius: var(--li-radius-size);
      }
      .top-div{
        padding-bottom: 10px;
        background: #30A2A0;
        overflow: hidden;
      }
      div:has(+li>input:checked) {
        --border-bottom-right-radius: var(--li-radius-size);
      }

      li:has(input:checked) {
        border-top-left-radius: var(--li-radius-size) !important;
        border-bottom-left-radius: var(--li-radius-size) !important;
        color: #222;
        background-color: white;
        &>i{
          color: #42B1AE !important;
        }
      }

      li:has(input:checked)+li {
        position: relative;
        border-top-right-radius: var(--li-radius-size);
      }
      li:has(input:checked)+li{
        border-top-right-radius: var(--li-radius-size);
      }
    }
  }
  
  .right {
    background-color: white;
    flex: 1;
    border-radius: var(--right-radius-size);
    border: 1px solid white;
    margin: 10px 10px 10px 0;
    padding: 20px;
  }
}
</style>
